.rect-wrap {
    position: relative;
    perspective: 1600px;
}
.container {
    width: 800px;
    height: 800px;
    margin:0 auto;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 200px; //设置3d空间的原点在平面中心再向Z轴移动200px的位置
}
/***立方体的每个面**/
.slide {
    width: 400px;
    height: 400px;
    position: absolute;  //定位
}
.top {
    left: 200px;
    top: -200px;
    transform: rotateX(-90deg);
    transform-origin: bottom;
    background:url(../../images/img7.JPG) no-repeat;
    background-size: 100%;
}
.bottom {
    left: 200px;
    bottom: -200px;
    transform: rotateX(90deg);
    transform-origin: top;
    background:url(../../images/img2.jpeg) no-repeat;
    background-size: 100%;
}
.left {
    left: -200px;
    top: 200px;
    transform: rotateY(90deg);
    transform-origin: right;
    background:url(../../images/img3.jpeg) no-repeat;
    background-size: 100%;
}
.right {
    left: 600px;
    top: 200px;
    transform: rotateY(-90deg);
    transform-origin: left;
    background:url(../../images/img4.jpeg) no-repeat;
    background-size: 100%;
}
.front {
    left: 200px;
    top: 200px;
    transform: translateZ(400px);  //立方体前面正对着屏幕，所以不用旋转，只需向Z轴前移动距离
    background-size: 100%;
    background:url(../../images/img5.jpeg) no-repeat;
}
.back{
	left: 200px;
	top: 200px;
	transform: translateZ(0);   //立方体后面正对着屏幕，所以不用旋转，只需向Z轴后移动距离
    background-size: 100%;
	background:url(../../images/img6.jpeg) no-repeat;
}
.container{
    animation: rotate-frame 30s linear infinite;
}
@keyframes rotate-frame {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(180deg);
    }
    20% {
        transform: rotateX(-180deg) rotateY(180deg);
    }
    30% {
        transform: rotateX(-360deg) rotateY(180deg);
    }
    40% {
        transform: rotateX(-360deg) rotateY(360deg);
    }
    50% {
        transform: rotateX(-180deg) rotateY(360deg);
    }
    60% {
        transform: rotateX(90deg) rotateY(180deg);
    }
    70% {
        transform: rotateX(0) rotateY(180deg);
    }
    80% {
        transform: rotateX(90deg) rotateY(90deg);
    }
    90% {
        transform: rotateX(90deg) rotateY(0);
    }
    100% {
        transform: rotateX(0) rotateY(0);
    }
}